<template>
    <n-card class="doc-card">
        <div class="doc-card-header" @click="navigateToRoute">
            <n-avatar round class="doc-card-header-avatar" :style="{
                color: '#fff',
                backgroundColor: randomColor()
            }">{{ extractFirstCharacter(current.tenantName) }}</n-avatar>
            <span class="doc-card-header-title">{{ current.tenantName }}</span>
        </div>
        <div class="doc-card-content" @click="navigateToRoute">
            <n-ellipsis :line-clamp="2" :tooltip="false">
                {{ current.tenantDesc }}
            </n-ellipsis>
        </div>
        <template #footer>
            <n-grid cols="24">
                <n-grid-item :span="8">
                    <div class="doc-card-footer-line-t">
                        <n-tooltip placement="top">
                            <template #trigger>
                                <n-icon>
                                    <EditOutlined @click="callParentMethod" />
                                </n-icon>
                            </template>
                            <span>修改</span>
                        </n-tooltip>
                    </div>
                </n-grid-item>
                <n-grid-item :span="8">
                    <div class="doc-card-footer-line-t">
                        <n-tooltip placement="top">
                            <template #trigger>
                                <n-icon>
                                    <DeleteOutlined @click="handleDelete" />
                                </n-icon>
                            </template>
                            <span>删除</span>
                        </n-tooltip>
                    </div>
                </n-grid-item>
                <n-grid-item :span="8">
                    <div class="doc-card-footer-line">
                        <n-switch size="small" @update:value="handleSwitchUpdateValue" checked-value="启用"
                            unchecked-value="禁用" :value="active">
                            <template #checked>
                                <span style="font-size: 12px;">启用</span>
                            </template>
                            <template #unchecked>
                                <span style="font-size: 12px;">禁用</span>
                            </template>
                        </n-switch>
                    </div>
                </n-grid-item>
            </n-grid>
        </template>
    </n-card>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { EditOutlined, DeleteOutlined, EllipsisOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import { randomColor, extractFirstCharacter } from '@/utils/convert';
import { removeTenant, disabledTenant } from '@/api/system/tenant';
import { ResultEnum, Disabled } from '@/enums/httpEnum';
export default defineComponent({
    name: 'tenantCard',
    components: {
        EditOutlined,
        DeleteOutlined,
        EllipsisOutlined
    },
    props: {
        current: {
            type: Object,
            default: {},
        },
        reloadTable: {
            type: Function,
            required: true
        },
    },
    setup(props, { emit }) {
        const message = useMessage();
        const router = useRouter();
        const activeRef = ref('');
        const dialog = useDialog();
        onMounted(() => {
            activeRef.value = props.current.deleted === 0 ? '启用' : '禁用';
        });
        const navigateToRoute = () => {
            router.push({ name: 'tenant-detail', params: { id: props.current.id } });
        }
        /**调用父组件编辑函数 */
        const callParentMethod = () => {
            emit('handleEdit', props.current, false);
        };
        const handleSwitch = (actionType: string) => {
            dialog.warning({
                title: '警告',
                content: `确定${actionType}${props.current.tenantName}吗？`,
                positiveText: '确定',
                negativeText: '取消',
                onPositiveClick: async () => {
                    const data = await disabledTenant({ id: props.current.id });
                    if (data.code !== ResultEnum.SUCCESS) {
                        const resultMsg = data.data ? data.data : '';
                        message.error(data.mesg + '-' + resultMsg);
                    }
                    if (data.code === ResultEnum.SUCCESS) {
                        message.success(data.mesg);
                        if (activeRef.value === Disabled.ENABLE) {
                            activeRef.value = '禁用';
                        } else {
                            activeRef.value = '启用';
                        }
                        props.reloadTable();
                    }
                },
            })
        }
        return {
            inverted: ref(false),
            navigateToRoute,
            handleSwitch,
            randomColor,
            extractFirstCharacter,
            active: activeRef,
            activeKey: ref<string | null>(null),
            callParentMethod,
            handleUpdateValue(key: string) {
                message.info(JSON.stringify(key));
                navigateToRoute();
            },
            handleSwitchUpdateValue(value: string) {
                handleSwitch(value);
            },
            handleDelete() {
                dialog.warning({
                    title: '警告',
                    content: `确定删除${props.current.tenantName}吗？`,
                    positiveText: '确定',
                    negativeText: '取消',
                    onPositiveClick: async () => {
                        const data = await removeTenant({ id: props.current.tenantId });
                        if (data.code !== ResultEnum.SUCCESS) {
                            const resultMsg = data.data ? data.data : '';
                            message.error(data.mesg + '-' + resultMsg);
                        }
                        if (data.code === ResultEnum.SUCCESS) {
                            message.success(data.mesg);
                            props.reloadTable();
                        }
                    },
                })
            }
        }
    }
})

</script>
<style scoped>
.doc-card {
    margin-bottom: 13px;
    cursor: pointer;
    transition: box-shadow .5s, border-color .5s;
}

.doc-card:hover {
    border: none;
    border-color: transparent;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .16), 0 3px 6px 0 rgba(0, 0, 0, .12), 0 5px 12px 4px rgba(0, 0, 0, .09);
}

.doc-card-header {
    height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-card-content {
    padding: 8px 0px 0px 0px;
}


.doc-card-header-avatar {
    vertical-align: middle !important;
}

.doc-card-header-title {
    padding: 0px 10px 0px 10px;
    font-size: 16px;
}

.doc-card-footer-line {
    height: 100%;
    line-height: 35px;
    width: 100%;
    text-align: center;
}

.doc-card-footer-line-t {
    height: 100%;
    font-size: 18px;
    line-height: 48px;
    width: 100%;
    text-align: center;
}

.doc-card-footer-line-t:hover {
    color: #1677ff;
}
</style>
  
